import { Form, Input, Button, Select, Image, Modal ,DatePicker, Space, message } from "antd";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import store from '../../store/index'
import {useEffect} from 'react';
import http from '../../utils/http';
import moment from 'moment';
import "../Vehicle_information_management/VehicleInformationAdd.scss";
import './VisitorAdd.scss'
const { Option } = Select;
const { confirm } = Modal;
const layout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 14,
    },
  };
  const tailLayout = {
    wrapperCol: {
      offset: 8,
      span: 16,
    },
  };
export const VisitorAdd = ({ setState }) => {
  //返回主页面
  const backCar = () => {
    setState(1);
  };
  const quxiao = () => {
    confirm({
      icon: <ExclamationCircleOutlined />,
      content: "您确定离开此页面吗？",
      cancelText: "取消",
      okText: "确定",
      onOk() {
        console.log("OK");
        backCar();
      },
      onCancel() {
        console.log("Cancel");
      },
    });
  }; 
  const [addForm] = Form.useForm();
  const [addForme] = Form.useForm();
  const [addFormes] = Form.useForm();
  const add=()=>{
   console.log(addForm.getFieldsValue(true),addForme.getFieldsValue(true),addFormes.getFieldsValue(true)); 
   http({
     url:'/visitors/addVisitors',
     method:'post',
     params:{
      visName:addForm.getFieldsValue(true).visName,//访客姓名
      visPhone:addForm.getFieldsValue(true).visPhone,//联系方式
      visSex:addForm.getFieldsValue(true).visSex,//访客性别
      visEducation:addForm.getFieldsValue(true).visEducation,//访客学历
      visVect:addForm.getFieldsValue(true).visVect,//微信号
      vireType:addForme.getFieldsValue(true).vireType,//造访类型
      vireName:addForme.getFieldsValue(true).vireName,//负责人姓名
      vireStarttime:addForme.getFieldsValue(true).vireStarttime,//造访开始时间
      vireFloor:addForme.getFieldsValue(true).vireFloor,//楼宇
      vireEndtime:addFormes.getFieldsValue(true).vireEndtime,//造访结束时间
      virePhone:addFormes.getFieldsValue(true).virePhone,//联系方式
      vireRoom:addFormes.getFieldsValue(true).vireRoom,//房间名称
      vireUnit:addFormes.getFieldsValue(true).vireUnit,//公司
     }
   }).then((res)=>{
     console.log(res);
     if(res.code==200){
      addForm.resetFields();
      addForme.resetFields();
      addFormes.resetFields();
       message.success({
         content:'添加成功',
         className: 'custom-class',
         style: {
           marginTop: '20vh',
         }
       })
     } else{
      message.error({
        content:`${res.msg}`,
        className: 'custom-class',
        style: {
          marginTop: '20vh',
        }
      }) }
   })
   
  }
    return (
        <div className="xinzeng visitorAdd">
        <div>
          <div className="tit">
            <div>
              <div>
                <div></div>
                <div>访客信息新增</div>
              </div>
            </div>
            <div>
              <span className="iconfont icon-a-16guanbi" onClick={quxiao}></span>
            </div>
          </div>
          <hr></hr>
          <div className="content">
            <div>
              <p>访客基本信息:</p>
              <Form
                {...layout}
                form={addForm}
                name="control-hooks"
              >
                <Form.Item
                  name="visName"
                  label="访客姓名"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Input />
                </Form.Item>
                <Form.Item
                  name="visPhone"
                  label="联系方式"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Input/>
                </Form.Item>
                <Form.Item
                  name="visSex"
                  label="访客性别"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                    <Select placeholder='请选择' className='select'  >
                                <Option value="0">男</Option>
                                <Option value="1">女</Option>
                            </Select>
                </Form.Item>
                <Form.Item
                  name="visEducation"
                  label="访客学历"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Input  />
                </Form.Item>
                
                <Form.Item
                  name="visVect"
                  label="绑定微信号："
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Input  />
                </Form.Item>
                <Form.Item
                  name="visFace"
                  label="人脸照片"
                  rules={[
                    {
                      required: true,
                    },
                  ]}
                >
                  <Image
                    width={100}
                  />
                </Form.Item>
              </Form>
            </div>
            <div>
              <p>造访单位信息:</p>
              <div className="visitor">
                <div>
                  <Form
                    {...layout}
                    form={addForme}
                    name="control-hooks"
                  >
                   
                    <Form.Item
                      name="vireType"
                      label="造访类型"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Select
                        // placeholder=""
                        allowClear
                        // defaultValue="临时车"
                      >
                        <Option value="企业">企业</Option>
                        <Option value="租户">租户</Option>
                      </Select>
                    </Form.Item>
                    <Form.Item
                      name="vireName"
                      label="负责人姓名"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Input />
                    </Form.Item>
                    <Form.Item
                      name="vireFloor"
                      label="所属楼宇"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Select
                        // placeholder=""
                        allowClear
                        // defaultValue="临时车"
                      >
                        <Option value="A1幢">A1幢</Option>
                        <Option value="A2幢">A2幢</Option>
                        <Option value="A3幢">A3幢</Option>
                      </Select>
                    </Form.Item>
                    <Form.Item
                      name="vireStarttime"
                      label="造访时间"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                       <Input type='date' />
                    </Form.Item>
                    {/* <Form.Item >
                                  <Button type="primary" htmlType="submit">
                                      Submit
                                  </Button>
                              </Form.Item> */}
                  </Form>
                </div>
                <div>
                  <Form
                    {...layout}
                    form={addFormes}
                    name="control-hooks"
                  >
                    <Form.Item
                      name="vireUnit"
                      label="单位名称"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Input></Input>
                    </Form.Item>
                    <Form.Item
                      name="virePhone"
                      label="联系方式"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Input />
                    </Form.Item>
                    <Form.Item
                      name="vireRoom"
                      label="房间名称"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                      <Input />
                    </Form.Item>
                    <Form.Item
                      name="vireEndtime"
                      label="结束时间"
                      rules={[
                        {
                          required: true,
                        },
                      ]}
                    >
                        <Input type='date' />
                    </Form.Item>
                    <Form.Item {...tailLayout}>
                      <div className="btn">
                        <Button type="primary" htmlType="submit" onClick={add}>
                          保存
                        </Button>
                        <Button onClick={quxiao}>取消</Button>
                      </div>
                    </Form.Item>
                  </Form>
                </div>
              </div>
            </div>
          </div>
        </div>
        </div> 
    )
}


export default VisitorAdd